<template>
	<view class="page">
		<view class="nav">
			<view class="nav_right">
				<view class="search" @click="searchinfo">
					<uni-icons class="search_icon" type="search" size="20" color="#B3B3B3"></uni-icons>
					亲！请选择服务哦~！
				</view>
			</view>
		</view>
		<view class="bestBusiness">
			<view class="bestBusiness-title">
				<text class="title">优质商家推荐</text>
				<text class="line"></text>
			</view>
			<scroll-view scroll-x="true" class="scroll">
				<view class="box" @click="handleDetail">
					<view class="thunmb">
						<image src="../../static/img/2.jpg" class="images"></image>
					</view>
					<view class="boxtext">
						<view class="title">百果园PSGOPA</view>
						<view class="text clearfix">
							<text class="score fl">4.0分</text>
							<text class="sale fl">累计销量：9999+</text>
						</view>
						<view class="text2">
							<text>买菜做饭</text>
							<text>买菜做饭</text>
						</view>
						<view class="text3">接单距离：2.1km</view>
					</view>
				</view>
				<view class="box">
					<view class="thunmb">
						<image src="../../static/img/2.jpg" class="images"></image>
					</view>
					<view class="boxtext">
						<view class="title">百果园PSGOPA</view>
						<view class="text clearfix">
							<text class="score fl">4.0分</text>
							<text class="sale fl">累计销量：9999+</text>
						</view>
						<view class="text2">
							<text>买菜做饭</text>
							<text>买菜做饭</text>
						</view>
						<view class="text3">接单距离：2.1km</view>
					</view>
				</view>
				<view class="box">
					<view class="thunmb">
						<image src="../../static/img/2.jpg" class="images"></image>
					</view>
					<view class="boxtext">
						<view class="title">百果园PSGOPA</view>
						<view class="text clearfix">
							<text class="score fl">4.0分</text>
							<text class="sale fl">累计销量：9999+</text>
						</view>
						<view class="text2">
							<text>买菜做饭</text>
							<text>买菜做饭</text>
						</view>
						<view class="text3">接单距离：2.1km</view>
					</view>
				</view>
				<view class="box">
					<view class="thunmb">
						<image src="../../static/img/2.jpg" class="images"></image>
					</view>
					<view class="boxtext">
						<view class="title">百果园PSGOPA</view>
						<view class="text clearfix">
							<text class="score fl">4.0分</text>
							<text class="sale fl">累计销量：9999+</text>
						</view>
						<view class="text2">
							<text>买菜做饭</text>
							<text>买菜做饭</text>
						</view>
						<view class="text3">接单距离：2.1km</view>
					</view>
				</view>
				<view class="box">
					<view class="thunmb">
						<image src="../../static/img/2.jpg" class="images"></image>
					</view>
					<view class="boxtext">
						<view class="title">百果园PSGOPA</view>
						<view class="text clearfix">
							<text class="score fl">4.0分</text>
							<text class="sale fl">累计销量：9999+</text>
						</view>
						<view class="text2">
							<text>买菜做饭</text>
							<text>买菜做饭</text>
						</view>
						<view class="text3">接单距离：2.1km</view>
					</view>
				</view>
				<view class="box">
					<view class="thunmb">
						<image src="../../static/img/2.jpg" class="images"></image>
					</view>
					<view class="boxtext">
						<view class="title">百果园PSGOPA</view>
						<view class="text clearfix">
							<text class="score fl">4.0分</text>
							<text class="sale fl">累计销量：9999+</text>
						</view>
						<view class="text2">
							<text>买菜做饭</text>
							<text>买菜做饭</text>
						</view>
						<view class="text3">接单距离：2.1km</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="serverItem">
			<view class="bestBusiness-title">
				<text class="title">服务项目</text>
				<text class="line"></text>
			</view>
			<view class="serverItemBox">
				<view class="ul">
					<view class="li">
						<view class="flexLeft flexLeft1 vCenter">
							<view>
								<view class="title">照顾护理</view>
								<view class="more">查看全部<uni-icons type="forward" color="#FE886A" size="12"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flexRight">
							<view class="rItem">
								<image src="../../static/menus/17.png"></image>买菜做饭
							</view>
							<view class="rItem">
								<image src="../../static/menus/42.png"></image>洗浴
							</view>
							<view class="rItem">
								<image src="../../static/menus/16.png"></image>理发
							</view>
							<view class="rItem">
								<image src="../../static/menus/4.png"></image>定期探望
							</view>
							<view class="rowline"></view>
							<view class="columLine"></view>
						</view>
					</view>
					<view class="li">
						<view class="flexLeft flexLeft2 vCenter">
							<view>
								<view class="title">保洁卫生</view>
								<view class="more">查看全部<uni-icons type="forward" color="#368AFF" size="12"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flexRight">
							<view class="rItem">
								<image src="../../static/menus/40.png"></image>洗涤衣物
							</view>
							<view class="rItem">
								<image src="../../static/menus/11.png"></image>洗涤衣物
							</view>
							<view class="rItem">
								<image src="../../static/menus/15.png"></image>废品处理
							</view>
							<view class="rItem">
								<image src="../../static/menus/28.png"></image>清洗油烟机
							</view>
							<view class="rowline"></view>
							<view class="columLine"></view>
						</view>
					</view>
					<view class="li">
						<view class="flexLeft flexLeft3 vCenter">
							<view>
								<view class="title">改造维修</view>
								<view class="more">查看全部<uni-icons type="forward" color="#7787EC" size="12"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flexRight">
							<view class="rItem">
								<image src="../../static/menus/10.png"></image>换水龙头
							</view>
							<view class="rItem">
								<image src="../../static/menus/14.png"></image>开锁换锁
							</view>
							<view class="rItem">
								<image src="../../static/menus/7.png"></image>管道疏通
							</view>
							<view class="rItem">
								<image src="../../static/menus/38.png"></image>物品整理
							</view>
							<view class="rowline"></view>
							<view class="columLine"></view>
						</view>
					</view>
					<view class="li">
						<view class="flexLeft flexLeft4 vCenter">
							<view>
								<view class="title">生活配送</view>
								<view class="more">查看全部<uni-icons type="forward" color="#5DDFDE" size="12"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flexRight">
							<view class="rItem">
								<image src="../../static/menus/22.png"></image>液化气配送
							</view>
							<view class="rItem">
								<image src="../../static/menus/32.png"></image>桶装水配送
							</view>
							<view class="rItem">
								<image src="../../static/menus/30.png"></image>日用品配送
							</view>
							<view class="rItem">
								<image src="../../static/menus/21.png"></image>粮油配送
							</view>
							<view class="rowline"></view>
							<view class="columLine"></view>
						</view>
					</view>
					<view class="li">
						<view class="flexLeft flexLeft5 vCenter">
							<view>
								<view class="title">出门陪护</view>
								<view class="more">查看全部<uni-icons type="forward" color="#CA75F4" size="12"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flexRight">
							<view class="rItem">
								<image src="../../static/menus/3.png"></image>出行陪同
							</view>
							<view class="rItem">
								<image src="../../static/menus/13.png"></image>就医陪同
							</view>
							<view class="rItem">
								<image src="../../static/menus/6.png"></image>陪同购物
							</view>
							<view class="rItem">
								<image src="../../static/menus/20.png"></image>陪床护理
							</view>
							<view class="rowline"></view>
							<view class="columLine"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="teacher_box">
			<view class="bestBusiness-title">
				<text class="title">热售服务</text>
				<text class="line"></text>
			</view>
			<view class="hotService">
				<view class="hotSerItem">
					<view class="thunmb">
						<image src="../../static/menus/10.png"></image>
					</view>
					<view class="text">
						<view class="title">理发</view>
						<view class="p">价格：68元/人</view>
						<view class="p">销量：8</view>
						<view class="p">离我距离：1.2km</view>
					</view>
					<view class="orderBtn">
						预约服务
					</view>
				</view>
				<view class="hotSerItem">
					<view class="thunmb">
						<image src="../../static/menus/10.png"></image>
					</view>
					<view class="text">
						<view class="title">理发</view>
						<view class="p">价格：68元/人</view>
						<view class="p">销量：8</view>
						<view class="p">离我距离：1.2km</view>
					</view>
					<view class="orderBtn">
						预约服务
					</view>
				</view>
				<view class="hotSerItem">
					<view class="thunmb">
						<image src="../../static/menus/10.png"></image>
					</view>
					<view class="text">
						<view class="title">理发</view>
						<view class="p">价格：68元/人</view>
						<view class="p">销量：8</view>
						<view class="p">离我距离：1.2km</view>
					</view>
					<view class="orderBtn" @click="orderServer">
						预约服务
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				datalist: {},
				height: 0.6,
				title: '机构列表',
				list: [{
					'id': 1,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 2,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 3,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 4,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 5,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 6,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 7,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 8,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}],
				sigleItem: {
					title: '距离最近', //排序头的名称
					value: '距离最近',
					type: 0
				}
			};
		},
		onLoad() {
			let tempdata = {
				filterType: 1,
				data: []
			};

			let normalItem = {
				title: '服务项目', //排序头的名称
				value: 'a',
				type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
				data: [{
					"value": "01",
					"text": "生产经营型",
					"children": [{
						"value": "0101",
						"text": "酒类副食"
					}, {
						"value": "0102",
						"text": "建筑地产"
					}, {
						"value": "0103",
						"text": "老年用品"
					}, {
						"value": "0104",
						"text": "家具制造"
					}, {
						"value": "0105",
						"text": "金融保险"
					}, {
						"value": "0106",
						"text": "消防安防"
					}, {
						"value": "0107",
						"text": "家用电器"
					}, {
						"value": "0108",
						"text": "厨卫用品"
					}, {
						"value": "0109",
						"text": "电子产品"
					}, {
						"value": "0110",
						"text": "体育器材"
					}, {
						"value": "0111",
						"text": "工程机械"
					}, {
						"value": "0112",
						"text": "医疗机械"
					}, {
						"value": "0113",
						"text": "油漆涂料"
					}, {
						"value": "0114",
						"text": "家装建材"
					}, {
						"value": "0115",
						"text": "园林绿化"
					}, {
						"value": "0116",
						"text": "生态农场"
					}, {
						"value": "0117",
						"text": "养殖水产"
					}, {
						"value": "0118",
						"text": "农业种植"
					}, {
						"value": "0119",
						"text": "旅游景区"
					}, {
						"value": "0120",
						"text": "广告传媒"
					}, {
						"value": "0121",
						"text": "运输快递"
					}]
				}, {
					"value": "02",
					"text": "经营服务型",
					"children": [{
						"value": "0201",
						"text": "美食餐饮"
					}, {
						"value": "0202",
						"text": "宾馆酒店"
					}, {
						"value": "0203",
						"text": "服装鞋帽"
					}, {
						"value": "0204",
						"text": "药店连锁"
					}, {
						"value": "0205",
						"text": "瓜果实蔬"
					}, {
						"value": "0206",
						"text": "手机通讯"
					}, {
						"value": "0207",
						"text": "茶叶茶具"
					}, {
						"value": "0208",
						"text": "蛋糕西点"
					}, {
						"value": "0209",
						"text": "五金水暖"
					}, {
						"value": "0210",
						"text": "瓜果蔬菜"
					}, {
						"value": "0211",
						"text": "窗帘门窗"
					}, {
						"value": "0212",
						"text": "厨卫用品"
					}, {
						"value": "0213",
						"text": "灯具开关"
					}, {
						"value": "0214",
						"text": "美发美甲"
					}, {
						"value": "0215",
						"text": "女性之家"
					}, {
						"value": "0216",
						"text": "汽车之家"
					}, {
						"value": "0217",
						"text": "生活超市"
					}, {
						"value": "0218",
						"text": "茶楼棋牌"
					}, {
						"value": "0219",
						"text": "招商展会"
					}]
				}, {
					"value": "03",
					"text": "服务中介型",
					"children": [{
						"value": "0301",
						"text": "家政服务"
					}, {
						"value": "0302",
						"text": "养老机构"
					}, {
						"value": "0303",
						"text": "按摩足疗"
					}, {
						"value": "0304",
						"text": "酒吧娱乐"
					}, {
						"value": "0305",
						"text": "教育辅导"
					}, {
						"value": "0306",
						"text": "招生招聘"
					}, {
						"value": "0307",
						"text": "物业管理"
					}, {
						"value": "0308",
						"text": "音乐舞蹈"
					}, {
						"value": "0309",
						"text": "体育运动"
					}, {
						"value": "0310",
						"text": "中药养生"
					}, {
						"value": "0311",
						"text": "健康医疗"
					}, {
						"value": "0312",
						"text": "租聘中介"
					}, {
						"value": "0313",
						"text": "资讯公司"
					}, {
						"value": "0314",
						"text": "公益活动"
					}]
				}, ]

			};

			this.sigleItem = {
				title: '距离最近', //排序头的名称
				value: '距离最近',
				type: 0
			};
			let sigleItem1 = {
				title: '智能排序', //排序头的名称
				value: '智能排序',
				type: 1,
				data: [{
						value: 1,
						text: '不限'
					},
					{
						value: 2,
						text: '评分最高'
					},
					{
						value: 3,
						text: '距离最近'
					},
					{
						value: 4,
						text: '接单最多'
					}
				]

			};
			tempdata.data.push(this.sigleItem, normalItem, sigleItem1);
			this.datalist = tempdata;
		},
		methods: {
			// 获取分类信息
			change(e) {
				console.log('----------change----------');
				console.log(e);
			},
			select(e) {
				console.log('----------select----------');
				console.log(e);
			},
			changeTopItem(e) {
				console.log(e)
				if (e.type === 0) {
					this.positionInfo()
				}
			},
			positionInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log(res)
								uni.chooseLocation({
									latitude: res.latitude,
									longitude: res.longitude,
									success: e => {
										console.log(e)
										this.$set(this.sigleItem, 'title', e.name ? e.name : e.address)
										this.$set(this.sigleItem, 'value', e.name ? e.name : e.address)
									},
									fail: function(t) {}
								});
							}
						});
					},
					fail(err) { // 这里用户点取消了
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			handleDetail(e) {
				uni.navigateTo({
					url: '/pages/business/business_details?e=' + e
				})
			},
			searchinfo() {
				uni.navigateTo({
					url: '/pages/index/search',
				});
			},
			orderServer () {
				uni.navigateTo({
					url: 'userReservation',
				});
			}
		}
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.nav {
		display: flex;
		background-color: #037BC7;
		box-sizing: border-box;
		padding: 20rpx 20rpx;

		.nav_right {
			flex: 1;
			.search {
				box-sizing: border-box;
				width: 100%;
				height: 70rpx;
				border-radius: 35rpx;
				background-color: #FFFFFF;
				color: #B3B3B3;
				line-height: 70rpx;
				margin: 0 10rpx 0 0rpx;
				padding-left: 44rpx;
				font-size: 26rpx;
				.search_icon {
					vertical-align: middle;
				}
			}
		}
	}

	.teacher_search_box {
		box-sizing: border-box;
		display: flex;
		width: 656rpx;
		height: 52rpx;
		line-height: 52rpx;
		border: 2rpx #FC503E solid;
		margin-left: 52rpx;
		margin-top: 20rpx;
		border-radius: 38rpx;
		margin-bottom: 12rpx;

		.teacher_search {
			padding-left: 50rpx;
			width: 80%;
			font-size: 24rpx;
		}
	}


	.teacher_box {
		.hotService {
			padding: 0 34rpx;
			.hotSerItem {
				position: relative;
				display: flex;
				padding-bottom: 14rpx;
				margin-bottom: 17rpx;
				border-bottom: 1px solid #E2E2E2;
				.thunmb {
					flex: 0 0 157rpx;
					width: 157rpx;
					height: 157rpx;
					padding: 17rpx;
					margin-right: 38rpx;
					border-radius:8rpx;
					border:1px solid rgba(226,226,226,1);
					text-align: center;
					box-sizing: border-box;
					image {
						width: 124rpx;
						height: 124rpx;
					}
				}
				.title {
					margin-bottom: 17rpx;
					line-height: 100%;
					font-size:32rpx;
					color:rgba(86,86,86,1)
				}
				.p {
					margin-bottom: 17rpx;
					line-height: 100%;
					font-size: 26rpx;
					color:rgba(86,86,86,1);
				}
				.p:last-child {
					margin-bottom: 0;
				}
				.orderBtn {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width:167rpx;
					height:58rpx;
					line-height: 58rpx;
					background:rgba(54,138,255,1);
					border-radius:29rpx;
					border:1px solid rgba(151,151,151,1);
					font-size: 26rpx;
					color: #fff;
					text-align: center;
				}
			}
			.hotSerItem:last-child {
				border-bottom: none;
			}
		}
	}

	.bestBusiness-title {
		position: relative;
		padding: 33rpx 0;
		text-align: center;

		.title {
			position: relative;
			z-index: 1;
			display: inline-block;
			line-height: 63rpx;
			color: rgba(86, 86, 86, 1);
			font-size: 42rpx;
		}

		.line {
			position: absolute;
			top: 78rpx;
			left: 50%;
			transform: translateX(-50%);
			display: block;
			width: 97rpx;
			height: 17rpx;
			margin: 0px auto;
			background: rgba(215, 232, 255, 1);
			border-radius: 13rpx;
			z-index: 0;
		}
	}

	.bestBusiness {

		.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			padding: 0 23.5rpx;
			box-sizing: border-box;
		}

		.box {
			display: inline-block;
			width: 355upx;
			height: auto;
			padding: 0 8.5rpx;
			.thunmb {
				width: 355rpx;
				height: 263upx;
				overflow: hidden;
				border-radius: 8rpx 8rpx 0px 0px;
				image {
					width: 100%;
					min-height: 100%;
				}
			}

			.boxtext {
				width: 355rpx;
				padding: 25upx;
				margin-bottom: 10rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
				border-radius: 0px 0px 8rpx 8rpx;

				.title {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 17rpx;
					line-height: 100%;
					color: rgba(86, 86, 86, 1);
					font-size: 31rpx;
				}

				.text {
					margin-bottom: 17rpx;

					.score {
						margin-right: 33rpx;
						line-height: 100%;
						font-size: 25rpx;
						color: rgba(254, 106, 106, 1);
					}

					.sale {
						line-height: 100%;
						font-size: 25rpx;
						color: rgba(179, 179, 179, 1);
					}
				}

				.text2 {
					margin-bottom: 17rpx;
					line-height: 31rpx;

					text {
						display: inline-block;
						padding: 0 12rpx;
						height: 31rpx;
						margin-right: 17rpx;
						line-height: 31rpx;
						border-radius: 18rpx;
						border: 1px solid rgba(54, 138, 255, 1);
						font-size: 24upx;
						color: #368AFF;
						text-align: center;
					}
				}

				.text3 {
					line-height: 100%;
					font-weight: 400;
					color: rgba(179, 179, 179, 1);
					font-size: 25rpx;
				}
			}
		}

		.box:last-child {
			margin-right: 0;
		}

		.images {
			width: 520upx;
			height: 360upx;
			border-radius: 16upx;
		}
	}

	.serverItem {
		.serverItemBox {
			.ul {
				.li {
					display: flex;
					width: 683rpx;
					height: 153rpx;
					margin: 0 auto 25rpx;

					.flexLeft {
						flex: 0 0 204rpx;
						width: 204rpx;
						height: 153rpx;
						box-shadow: 0px 1px 3rpx 0px rgba(0, 0, 0, 0.08);
						border-radius: 8rpx 0px 0px 8rpx;
						text-align: center;

						.title {
							display: block;
							margin-bottom: 5rpx;
							font-size: 32rpx;
							color: #fff;
							text-align: center;
						}

						.more {
							display: inline-block;
							height: 36rpx;
							margin: 0 auto;
							padding: 0 10rpx;
							line-height: 36rpx;
							border-radius: 21rpx;
							font-size: 24rpx;
							text-align: center;
							color: #FE886A;
							background: #fff;
						}
					}

					.flexLeft1 {
						background: url(../../static/img/bg1.png) no-repeat center center;
						background-size: 100% 100%;
					}

					.flexLeft2 {
						background: url(../../static/img/bg5.png) no-repeat center center;
						background-size: 100% 100%;

						.more {
							color: #368AFF;
						}
					}

					.flexLeft3 {
						background: url(../../static/img/bg4.png) no-repeat center center;
						background-size: 100% 100%;

						.more {
							color: #7787EC;
						}
					}

					.flexLeft4 {
						background: url(../../static/img/bg3.png) no-repeat center center;
						background-size: 100% 100%;

						.more {
							color: #5DDFDE;
						}
					}

					.flexLeft5 {
						background: url(../../static/img/bg2.png) no-repeat center center;
						background-size: 100% 100%;

						.more {
							color: #CA75F4;
						}
					}

					.flexRight {
						position: relative;
						flex: 1;
						display: grid;
						grid-template-columns: 50% 50%;
						grid-template-rows: 50% 50%;
						box-shadow: 0px 1px 4rpx 0px rgba(0, 0, 0, 0.1), 0px -1px 4rpx 0px rgba(0, 0, 0, 0.05);
						border-radius: 0px 8rpx 8rpx 0px;

						.rItem {
							display: flex;
							padding: 0 10rpx;
							padding-right: 0;
							align-items: center;
							color: rgba(86, 86, 86, 1);
							font-size: 32rpx;

							image {
								flex: 0 0 50rpx;
								width: 50rpx;
								height: 50rpx;
								margin-right: 8rpx;
							}
						}

						.columLine {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 100%;
							height: 1px;
							background: #E2E2E2;
						}

						.rowline {
							position: absolute;
							left: 50%;
							top: 0;
							transform: translateX(-50%);
							width: 1px;
							height: 100%;
							background: #E2E2E2;
						}
					}
				}
				.li:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>
